<template>
  <div class="projectBoxCot">
    <div class="memberCont navMarginTop allBackground" :style="{ height: screenHeightBg}">
      <div class="memberList flex flex-direction">
        <div class="member">
          <div class="memberTitle">
            <img src="../../assets/zuanshi.png" />
            开通VIP
          </div>
        </div>
        <div class="recharge-package flex-1">
          <div :class="['recharge-package-item', index === themIndex ? 'active' : '']"  v-for="(item, index) in redisInfo" :key="index" @click="chosePay(item,index)">
            <div class="recharge-package-top">
              <img src="@assets/openAi.png" alt="" />
            </div>
            <div class="recharge-package-bom">
              <div class="price-wrap">
                <div class="fix-pre">￥</div>
                <div class="dd">{{item.money}}</div>
              </div>
              <div class="price-wrap-mid">{{ item.packageName }}</div>
              <div class="price-wrap-fot">获得{{ item.issuesNumber }}对话条数，享受所有问答AI模型。{{item.pictureNumber}}次绘画次数型。有效时间为{{item.timeLimit}}天。</div>
              <div class="mt-auto">
                <div class="text-sm">
                  <div class="none">对话次数：{{item.issuesNumber }}</div>
                  <!-- <div class="text-primary"></div> -->
                </div>
                <div class="text-sm">
                  <div class="none">绘画次数：{{ item.pictureNumber}}</div>
                  <!-- <div class="text-primary">+1</div> -->
                </div>
              </div>
            </div>
            <div :class="['rounded', 0 === index ? 'block' : '']">强烈推荐</div>
          </div>
        </div>
        <div class="btnBoTm justify-between" v-if="payObj.money !== 0"><div class="sheCot" @click="goPayment">立即充值</div></div>
      </div>
      <!-- <div class="memberList" @click="goToOrder">
        <div class="member">
          <div class="memberTitle">
            <img src="../../assets/order.png" />
            订单记录
          </div>
          <img class="right" src="../../assets/rightOpen.png" alt="" />
        </div>
      </div> -->

      <payment-page ref="modalPayment" :payObj="payObj"></payment-page>
    </div>
    <global-footer />
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import PaymentPage from './component/PaymentPage' //支付二维码
import GlobalFooter from '@/components/page/GlobalFooter'
// import {VxeWebSocketMixins} from '@/mixins/WebsocketMixin'
export default {
  name: 'MemberPage',
  // mixins: [VxeWebSocketMixins],
  components: {
    PaymentPage,
    GlobalFooter,
  },
  props: {},
  data() {
    return {
      themIndex:1,
      payObj: {},
      redisInfo: [],
      screenWidth: '',
      screenHeight: '',
      screenHeightBg: '',
      goPaymentId:'',
    }
  },
  created() {},
  computed: {},

  mounted() {
    this.$nextTick(function () {
      this.screenWidth = window.innerWidth
      this.screenHeight = window.innerHeight
      this.screenHeightBg = this.screenHeight - 120 + 'px'
    })
    this.apiPackageRechargeL()
  },
  methods: {
    goToOrder() {
      // var params = {
      //   content: item.cont,
      // }
      // this.$router.push({ path: '/chatgpt/OrderPage',query: {param: params}  })
      this.$router.push({ path: '/chatgpt/OrderPage' })
    },
    chosePay(item,index){
      this.themIndex = index
      this.payObj = item
    },
    goPayment(item,index) {
      if(this.goPaymentId === ''){
        this.payObj = this.redisInfo[this.themIndex]
      }
      this.$refs.modalPayment.activatePopShow = true
      this.$refs.modalPayment.apiPayment(this.redisInfo[this.themIndex].id)
      
    },
    apiPackageRechargeL() {
      getAction('/packagerecharge/packageRecharge/list')
        .then((res) => {
          console.log('res', res)
          this.redisInfo = res.result.records
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
  },
}
</script>

<style lang="less" scoped>
p {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.memberCont {
  .memberList {
    background: white;
    float: left;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 10px;
    height: 100%;
    .member {
      position: relative;
      margin-bottom: 20px;
      .memberTitle {
        font-size: 18px;
        color: #000;
        display: flex;
        align-items: center;
        font-weight: bold;
        img {
          width: 27px;
          margin-right: 5px;
        }
      }
      .right {
        display: block;
        position: absolute;
        top: 2px;
        right: 0;
        width: 11px;
      }
    }
  }
}
.btnBoTm{
  width: 250px;
  margin: auto;
}
.sheCot {
        line-height: 20px;
        color: #fff;
        background: linear-gradient(90deg, #938bff, #ff97f2);
        border-color: #938bff;
        display: inline-block;
        white-space: nowrap;
        cursor: pointer;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: 0;
        margin: 0;
        transition: all 0.3s;
        font-weight: 500;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 8px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin: auto;
        &:hover {
          opacity: 0.7;
        }
      }
.recharge-package {
  width: 100%;
    float: left;
    margin-bottom: 10px;
    padding-top: 2px;
  .recharge-package-item {
    box-shadow: 0px 0px 0px 1px #e4e7ed;
    border-radius: 6px;
    cursor: pointer;
    margin: 0 8px 16px;
    overflow: hidden;
    width: 220px;
    float: left;
    position: relative;
    .rounded{
      position:absolute;
      top: 0;
      left: 0;
      color: white;
      background: #ff3232;
      font-size: 13px;
      padding: 4px 10px;
      border-bottom-right-radius: 5px;
      display: none;
      &.block{
        display: block;
      }
    }
    &.active{
      box-shadow: 0px 0px 0px 2px #333333;
    }
    .recharge-package-top {
      img {
        object-fit: cover;
        height: 131px;
        width: 100%;
      }
    }
    .recharge-package-bom {
      padding: 15px;
      .price-wrap {
        color: rgb(255, 50, 50);
        align-items: baseline;
        display: flex;
        .fix-pre {
          font-size: 14px;
        }
        .dd {
          font-weight: 500;
          font-size: 20px;
        }
      }
      .price-wrap-mid {
        font-weight: 500;
        font-size: 16px;
        color: #101010;
        margin-top: 6px;
      }
      .price-wrap-fot {
        margin-top: 10px;
        color: #999;
        font-size: 13px;
        margin-bottom: 4px;
      }
      .mt-auto {
        .text-sm {
          margin-top: 6px;
          display: flex;
          justify-content: space-between;
          font-size: 13px;
          color: #101010;
        }
      }
    }
  }
  .btnBoTm{
   float: left;
   width: 100%;
    margin-top: 20px;
    .sheCot{
      width: 200px;
      margin: auto;
    }
  }
}

// .footer{
//     display: none;
//   }

@media screen and (max-width: 767px) {
  .recharge-package{
    column-gap: 0;
    column-count: 2;
    padding-bottom: 10px;
    flex: unset;
    overflow: unset!important;
    .recharge-package-item{
      margin: 2%;
      width: 95%;
    }
  } 

  .btnBoTm{
    width: 97%;
    position: fixed;
    bottom: 10px;
    left: 5px;
    right: 5px;
    .sheCot{
      width: 100%;
      line-height: 10px;
      border-radius: 30px;
      font-size: 13px;
    }
  }

  .allBackground{
    height: auto!important;
  }
  .projectBoxCot{
    padding-bottom: 50px;
  }

}
</style>